<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        commonjs    主要服务端 node require('http');
        AMD         requireJS,curLjs   
        CMD         seaJs 
        
        ES6  统一了服务端和客户端模块规范
        
        模块化： (需要放到服务器环境)
        a.如何定义模块化？
            什么时候用花括号？ 只要是 export出来的都要花括号，export default 不需要花括号
            
        b.如何使用？
    
        使用模块： <script type="module"></script>

        import 
            1.可以是相对路径，可以是绝对路径
            2.import 模块只会导入一次，无论你引入多少次
            3.import './modules/1.js' ; // export const a = 11;  相当于直接引入文件，直接执行 1.js里面的代码
            3.2 有提升效果， import会自动提升到最顶部首先执行
            3.3 import() 返回值是一个promise对象

            4.import { a,b,c } from './modules/1.js';    
                     export const a = 11;
                     export const b = 5;
                     export let c = 'ccccc';
 
                     const a = 11;
                     const b = 555;
                     let c = 'ccccc';
                     export { a, b, c }

            5.import { aaa,bbb,ccc } from './modules/3.js';   console.log( aaa,bbb,ccc ); // 11 555 "333ccccc"
                     const a = 11;
                     const b = 555;
                     let c = '333ccccc';
                     export {
                         a as aaa, // a 改成 aaa  
                         b as bbb,
                         c as ccc
                     }

            6.import { a as aaa, b as bbb, c as ccc } from './modules/4.js';   console.log( aaa,bbb,ccc ); // 11 555 "333ccccc"
                     const a = 11;
                     const b = 555;
                     let c = '333ccccc';
                     export {
                         a,
                         b,
                         c
                     }

            7.import * as modTwo from './modules/4.js';  console.log(modTwo.a);console.log(modTwo.b); // 11    // 555
            // 把模块里面的所有东西导入 * ，* as modTwo 把所有导入改名为 modTwo 

            8. import a from './modules/5.js'; console.log(a); // 666a
            // export 导出需要加花括号，其他的都不需要加花括号
                    let a = '666a'
                    export default a;

            9. import a,{cc,dd} from './modules/5.js'; console.log(a,cc,dd); // 666a 88cc 99dd
            // export 导出需要加花括号，其他的都不需要加花括号
            // 逗号隔开     
                    let a = '666a' 
                    export default a; 
                    export let cc = '88cc';
                    export let dd = '99dd';

            10. import mod,{sum,show,a,b} from './modules/7.js';    // 重点是 mod 

            11. './modules/8.js' ==> import { a, b } from './1.js'  // 8.js依赖 1.js 

            12. import mod,{sum,show,a,b} from './modules/8.js'; // 会自动提升到最顶部
            //  console.log(a+b); 有效果

            13. import {a,b} from './modules/9.js' ;console.log(a,b); setTimeout(()=>{ console.log(a); },3000)
            //导出的模块的内容，如果里面内容被修改了，外面也会改动 ，原先是12，3秒后改成了99
                    let a = 12;
                    let b = 7;
                    setTimeout(() => { a = 99}, 2000);

            14.* import() 类似node里面的require，可以动态引入，默认import 语法不能写到if之类里面；

            15.import() 引入的是 promise对象 

            16.import()  async await 

-->

    <script>
        async function main() {
            const mod1 = await
            import ('./modules/1.js');
            const mod2 = await
            import ('./modules/2.js');
            console.log(mod1, mod2);


            const [m1, m2] = await Promise.all([
                import ('./modules/1.js'),
                import ('./modules/2.js')
            ])
            console.log(m1, m2);
        };

        main();
    </script>

</body>

</html>